<template>
  <div class="project-approval">
    <!-- <ze-input ref="projectName" v-model="formData.name1" label="项目名111" /> -->
    <!-- <ze-textarea ref="projectDesc" v-model="formData.desc" label="项目概述" /> -->
    <!-- <ze-input ref="projectCode" v-model="formData.code1" label="项目编号111" /> -->
    <!-- <ze-input ref="projectAddress" v-model="formData.address" label="地点" /> -->
    <!-- <ze-picker v-model="formData.bm" :options="swList" label="商务负责人" /> -->
    <!-- <ze-picker v-model="formData.cto" :options="swList" label="技术负责人" /> -->
    <!-- <ze-picker v-model="formData.number" :options="swList" label="参与人" /> -->
    <!-- <ze-input ref="projectPrice" v-model="formData.totalPrice" label="项目总价" /> -->
    <!-- <ze-input ref="projectHours" v-model="formData.esWorkHours" label="预计工时" /> -->
    <!-- <ze-textarea ref="projectRemark" v-model="formData.remarks" label="备注" /> -->
    <div style="border-bottom: 1px solid #f2f2f2">
      <div style="display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; line-height: 14px;">
        <div>
          <span>项目名称</span>
        </div>
        <div style="display: flex; align-items: center; column-gap: 5px">
          <input
            :value="formData.name"
            placeholder="请输入"
            style="text-align: right"
            placeholder-style="color: #999;"
            @input="projectChange"
          />
        </div>
      </div>
      <!-- <van-field
        :value="formData.name"
        placeholder="请输入项目名称"
        label="项目名称"
        :border="false"
        input-align="right"
        @change="projectChange"
      /> -->
    </div>
    <div style="padding: 15px 16px">
      <div style="margin-top: 8px">
        <span>项目概述</span>
      </div>
      <div ref="divRef" style="height: 100px; background-color: #f9f8f8; margin-top: 10px; overflow-y: auto;" @click="gaishuClick">
        <textarea
          ref="gaishuRef"
          v-model="formData.desc"
          class="textarea"
          style="height: 100px;"
          placeholder="请输入"
          auto-height
          placeholder-style="color: #999;"
          @input="descChange"
        ></textarea>
      </div>
    </div>
    <div style="border-bottom: 1px solid #f2f2f2">
      <div style="display: flex; justify-content: space-between; align-items: center; padding: 14px 16px;">
        <div>
          <span>项目编号</span>
        </div>
        <div style="display: flex; align-items: center; column-gap: 5px">
          <input
            :value="formData.code"
            placeholder="请输入"
            style="text-align: right"
            placeholder-style="color: #999;"
            @input="codeChange"
          />
        </div>
      </div>
      <!-- <van-field
        :value="formData.code"
        placeholder="请输入项目编号"
        label="项目编号"
        :border="false"
        input-align="right"
        @change="codeChange"
      /> -->
    </div>
    <ze-dept v-model="formData.department" label="部门" />
    <div style="border-bottom: 1px solid #f2f2f2">
      <div style="display: flex; justify-content: space-between; align-items: center; padding: 14px 16px;">
        <div>
          <span>地点</span>
        </div>
        <div style="display: flex; align-items: center; column-gap: 5px">
          <input
            :value="formData.address"
            placeholder="请输入"
            style="text-align: right"
            placeholder-style="color: #999;"
            @input="addressChange"
          />
        </div>
      </div>
      <!-- <van-field
        :value="formData.address"
        placeholder="请输入地点"
        label="地点"
        :border="false"
        input-align="right"
        @change="addressChange"
      /> -->
    </div>
    <ze-commer v-model="formData.bm" label="商务负责人" />
    <ze-tech v-model="formData.cto" :options="swList" label="技术负责人" />
    <div style="padding: 0px 16px;border-bottom: 1px solid #f2f2f2">
      <ze-datetime ref="projectBegin" v-model="formData.begin" label="计划开始时间" />
    </div>
    <!-- <div
      style="
        display: flex;
        justify-content: space-between;
        padding: 4px 14px;
        align-items: center;
      "
    >
      <div style="margin-top: 8px">
        <span>计划开始时间</span>
      </div>
      <div
        style="
          display: flex;
          flex-direction: row;
          align-items: center;
          margin-top: 6px;
        "
        @click="beginChange"
      >
        <span style="color: #999; margin-right: 4px">请选择</span>
        <van-icon name="arrow" style="color: #999; margin-top: 2px" />
      </div>
    </div> -->
    <!-- <van-divider /> -->
    <!-- <div
      style="width: 100%; border-bottom: 1px solid #f2f2f2; margin-top: 10px"
    ></div> -->
    <div style="padding: 0 16px;border-bottom: 1px solid #f2f2f2">
      <ze-datetime ref="projectEnd" v-model="formData.end" label="计划结束时间" />
    </div>
    <div style="padding: 0px 16px;border-bottom: 1px solid #f2f2f2">
      <ze-datetime ref="projectRealbegin" v-model="formData.realBegin" label="实际开始时间" />
    </div>
    <div style="padding: 0px 16px;border-bottom: 1px solid #f2f2f2">
      <ze-datetime ref="projectRealend" v-model="formData.realEnd" label="实际结束时间" />
    </div>
    <ze-part v-model="formData.players" :options="swList" label="参与人" />
    <div style="border-bottom: 1px solid #f2f2f2">
      <div style="display: flex; justify-content: space-between; align-items: center; padding: 14px 16px;">
        <div>
          <span>项目总价</span>
        </div>
        <div style="display: flex; align-items: center; column-gap: 5px">
          <input
            :value="formData.budget"
            placeholder="请输入"
            style="text-align: right"
            placeholder-style="color: #999;"
            type="number"
            @input="totalPriceChange"
          />
        </div>
      </div>
      <!-- <van-field
        :value="formData.totalPrice"
        label="项目总价"
        input-align="right"
        placeholder="请输入项目总价"
        :border="false"
        type="number"
        @change="totalPriceChange"
      /> -->
    </div>
    <div style="border-bottom: 1px solid #f2f2f2">
      <div style="display: flex; justify-content: space-between; align-items: center; padding: 14px 16px;">
        <div>
          <span>预计工时</span>
        </div>
        <div style="display: flex; align-items: center; column-gap: 5px">
          <input
            :value="formData.esWorkHours"
            placeholder="请输入"
            style="text-align: right"
            placeholder-style="color: #999;"
            type="number"
            @input="esWorkHoursChange"
          />
        </div>
      </div>
      <!-- <van-field
        :value="formData.esWorkHours"
        label="预计工时"
        input-align="right"
        placeholder="请输入项目工时"
        :border="false"
        type="number"
        @change="esWorkHoursChange"
      /> -->
    </div>
    <div style="padding: 15px 16px">
      <div style="margin-top: 8px">
        <span style="font-size: 14px">备注</span>
      </div>
      <div style="height: 100px; background-color: #f9f8f8; margin-top: 10px; overflow-y: auto;">
        <textarea
          v-model="formData.remarks"
          class="textarea"
          placeholder="请输入"
          auto-height
          placeholder-style="color: #999;"
          @input="remarksChange"
        ></textarea>
      </div>
    </div>
    <!-- <uni-datetime-picker :disabled="dateShow" type="date" /> -->
    <ze-submit @submit="onSubmit" />
  </div>
</template>

<script>
// import ZeInput from '@/components/ze-oa-form/ze-input.vue'
import ZeTextarea from '@/components/ze-oa-form/ze-textarea.vue'
import ZePicker from '@/components/ze-oa-form/ze-picker.vue'
import ZeDatetime from '@/components/ze-oa-form/ze-datetime.vue'
import ZeSubmit from '@/components/ze-oa-form/ze-submit.vue'
import Divider from '@/components/ze-oa-form/cpns/divider.vue'
import ZeUpload from '@/components/ze-oa-form/ze-upload.vue'
import { postProcessForm } from '@/apis/process'
import ZeDept from '@/components/ze-pro-form/ze-dept/ze-dept.vue'
import ZeCommer from '@/components/ze-pro-form/ze-commer/ze-commer.vue'
import ZeTech from '@/components/ze-pro-form/ze-tech/ze-tech.vue'
import ZePart from '@/components/ze-pro-form/ze-part/ze-part.vue'
import { formatTimestamp } from '@/utils/format'
import { addProject, updateProject } from '@/apis/project'

export default {
  name: 'ZeOaForm',
  components: {
    // ZeInput,
    // ZeTextarea,
    ZeDatetime,
    ZePicker,
    ZeUpload,
    Divider,
    ZeSubmit,
    ZeDept,
    ZeCommer,
    ZeTech,
    ZePart,
  },
  props: {
    // eslint-disable-next-line vue/require-valid-default-prop
    data: { type: Object, default: {} },
  },
  data() {
    return {
      dateShow: false,
      formData: {
        name: '',
        desc: '',
        code: '',
        department: '', // 部门
        address: '',
        bm: '', // 商务负责人
        cto: '', // 技术负责人
        begin: '',
        end: '',
        realBegin: '',
        realEnd: '',
        players: [],
        budget: '',
        esWorkHours: '',
        remarks: '',
      },
      flag: '0',
      id: '',
      canyuzheArray: [],
      swList: [
        { label: '张三', value: 1 },
        { label: '李四', value: 2 },
      ],
    }
  },
  onShow() {
    // console.log('每次进来都会执行')
  },
  onload() {
    // console.log(this.formD, 'this.formD')
  },
  mounted() {
    // console.log(this.data, '拿到部门数据了dept')
    // this.$refs.projectName.$on('inputName', this.testName)
    this.$refs.projectBegin.$on('input', this.setBegin)
    this.$refs.projectEnd.$on('input', this.setEnd)
    this.$refs.projectRealbegin.$on('input', this.setBeginReal)
    this.$refs.projectRealend.$on('input', this.setEndReal)
    this.setFormData()
    uni.$on('edit', (editdata) => {
      this.editProject(editdata)
    })
  },
  created() {
    //
  },
  methods: {
    // 获取项目概述焦点
    gaishuClick() {
      console.log('focus')
      // this.$nextTick(() => {
      console.log(this.$refs.gaishuRef, 'this.$refs.gaishuRef')
      console.log(this.$refs.divRef, 'this.$refs.divRef')
      //   this.$refs.gaishuRef.focus()
      // })
    },
    timeFormat(value) {
      return formatTimestamp(value)
    },
    // 编辑赋值
    editProject(editdata) {
      uni.setStorageSync('proj_edit', {
        flag: '1',
        id: editdata.id,
      })
      this.canyuzheArray = []
      // console.log(editdata, 'abc')
      uni.setStorageSync('project_form', (this.formData.name = editdata.name))
      uni.setStorageSync('desc_form', (this.formData.desc = editdata.desc))
      uni.setStorageSync('code_form', (this.formData.code = editdata.code))
      uni.setStorageSync('storage_dept', { deptId: editdata.department, deptName: editdata.dept[0].name, type: 'dept' })
      this.formData.department = editdata.department
      uni.setStorageSync('storage_comm', { commId: editdata.bm, commName: editdata.bmUser.username, type: 'comm' })
      uni.setStorageSync('storage_tech', { techId: editdata.cto, techName: editdata.ctoUser.username, type: 'tech' })
      // eslint-disable-next-line array-callback-return
      editdata.playerList.map((key) => {
        this.canyuzheArray.push({
          id: key.id,
          username: key.username,
        })
      })
      uni.setStorageSync('storage_part', { partData: this.canyuzheArray, type: 'part' })
      uni.setStorageSync('address_form', (this.formData.address = editdata.address))
      uni.setStorageSync('begin_form', (this.formData.begin = this.timeFormat(editdata.begin)))
      uni.setStorageSync('end_form', (this.formData.end = this.timeFormat(editdata.end)))
      uni.setStorageSync('realbegin_form', (this.formData.realBegin = this.timeFormat(editdata.realBegin)))
      uni.setStorageSync('realend_form', (this.formData.realEnd = this.timeFormat(editdata.realEnd)))
      uni.setStorageSync('price_form', (this.formData.budget = editdata.budget))
      uni.setStorageSync('hour_form', (this.formData.esWorkHours = editdata.esWorkHours))
      uni.setStorageSync('remark_form', (this.formData.remarks = editdata.remarks))
      uni.$emit('edit2', editdata)
    },
    // 设置表单数据
    setFormData() {
      this.$nextTick(function() {
        const dataName = uni.getStorageSync('project_form')
        const dataDesc = uni.getStorageSync('desc_form')
        const dataCode = uni.getStorageSync('code_form')
        const dataAddress = uni.getStorageSync('address_form')
        const dataPrice = uni.getStorageSync('price_form')
        const dataHour = uni.getStorageSync('hour_form')
        const dataRemark = uni.getStorageSync('remark_form')
        const begin = uni.getStorageSync('begin_form')
        const end = uni.getStorageSync('end_form')
        const realbegin = uni.getStorageSync('realbegin_form')
        const realend = uni.getStorageSync('realend_form')
        this.formData.name = dataName
        this.formData.desc = dataDesc
        this.formData.code = dataCode
        this.formData.address = dataAddress
        this.formData.budget = dataPrice
        this.formData.esWorkHours = dataHour
        this.formData.remarks = dataRemark
        this.formData.begin = begin
        this.formData.end = end
        this.formData.realBegin = realbegin
        this.formData.realEnd = realend
      })
    },
    // 设置计划开始时间
    setBegin(begin) {
      uni.setStorageSync('begin_form', (this.formData.begin = begin))
    },
    // 设置计划结束时间
    setEnd(end) {
      uni.setStorageSync('end_form', (this.formData.end = end))
    },
    // 设置实际开始时间
    setBeginReal(realBegin) {
      uni.setStorageSync('realbegin_form', (this.formData.realBegin = realBegin))
    },
    // 设置实际结束时间
    setEndReal(realEnd) {
      uni.setStorageSync('realend_form', (this.formData.realEnd = realEnd))
    },
    // 项目名称输入值变动触发
    projectChange(event) {
      // console.log(event, '项目名称')
      uni.setStorageSync('project_form', (this.formData.name = event.target.value))
    },
    // 项目概述输入值变动触发
    descChange(event) {
      uni.setStorageSync('desc_form', (this.formData.desc = event.target.value))
    },
    // 项目编号输入值变动触发
    codeChange(event) {
      uni.setStorageSync('code_form', (this.formData.code = event.target.value))
    },
    // 项目地址输入值变动触发
    addressChange(event) {
      uni.setStorageSync('address_form', (this.formData.address = event.target.value))
    },
    // 项目总价输入值变动触发
    totalPriceChange(event) {
      uni.setStorageSync('price_form', (this.formData.budget = event.target.value))
    },
    // 预计工时输入值变动触发
    esWorkHoursChange(event) {
      uni.setStorageSync('hour_form', (this.formData.esWorkHours = event.target.value))
    },
    // 项目备注输入值变动触发
    remarksChange(event) {
      uni.setStorageSync('remark_form', (this.formData.remarks = event.target.value))
    },
    async onSubmit() {
      const value = uni.getStorageSync('proj_edit')
      console.log(value, '判断值')
      if (value) {
        this.flag = value.flag
      } else {
        this.flag = '0'
      }
      if (value.id != '') {
        this.formData.id = value.id
      }
      this.formData.players = []
      // console.log(this.formData, 'this.formData')
      try {
        const dept = uni.getStorageSync('storage_dept')
        const comm = uni.getStorageSync('storage_comm')
        const tech = uni.getStorageSync('storage_tech')
        const part = uni.getStorageSync('storage_part')
        // console.log(dept, '部门')
        // console.log(comm, '商务部')
        // console.log(tech, '技术部')
        // console.log(part, '参与者')
        this.formData.department = dept.deptId
        this.formData.bm = comm.commId
        this.formData.cto = tech.techId
        // this.formData.players = part.partData
        // eslint-disable-next-line array-callback-return
        part.partData.map((key) => {
          this.formData.players.push(key.id)
        })
        // if (value1) {
        //   this.commId = value.commId
        //   this.commName = value.commName
        // }
      } catch (e) {
        // error
      }
      if (!this.formData.department) {
        uni.showToast({
          title: '部门不能为空',
          icon: 'none',
          duration: 1500,
        })
        return
      }
      if (!this.formData.bm) {
        uni.showToast({
          title: '商务负责人不能为空',
          icon: 'none',
          duration: 1500,
        })
        return
      }
      if (!this.formData.cto) {
        uni.showToast({
          title: '技术负责人不能为空',
          icon: 'none',
          duration: 1500,
        })
        return
      }
      if (this.formData.players.length == 0) {
        uni.showToast({
          title: '参与者不能为空',
          icon: 'none',
          duration: 1500,
        })
        return
      }
      // if (this.flag == '1') {
      //   this.formData.id = this.id
      // }
      // console.log(this.formData, 'this.formData')
      // console.log(this.flag, 'this.flag')
      if (this.flag == '0') {
        this.addFunc(this.formData)
      } else {
        this.editFunc(this.formData)
      }
      // console.log(reqData, 'this.reqData')
      // this.$nextTick(function() {
      //   this.cleanStoragData()
      // })
      uni.$off('edit2')
      // const res = await postProcessForm({
      //   processDefinitionId: 'test_123:1:3be526d4-7d46-11ee-b3ff-0ed5a5e7df61',
      //   variables: this.formData,
      // })
    },
    // 新建
    async addFunc(formData) {
      // console.log(formData, '新增参数')
      // console.log(this.flag, '新增项目判断flag')
      const res = await addProject(formData)
      if (res.code == 0 || res.code == 200) {
        uni.showToast({
          title: '新增项目成功!',
          icon: 'success',
          duration: 1500,
          success(res) {
            uni.redirectTo({
              url: '/pages/office/project-approval/index',
            })
          },
        })
        this.cleanStoragData()
      } else if (res.code == 1001) {
        uni.showToast({
          title: '项目已存在!',
          icon: 'error',
          duration: 1500,
        })
      } else {
        uni.showToast({
          title: '新增失败!',
          icon: 'error',
          duration: 1500,
        })
      }
    },
    // 编辑
    async editFunc(formData) {
      // console.log(formData, '编辑参数')
      uni.setStorageSync('proj_edit', {
        flag: '0',
        id: '',
      })
      const value2 = uni.getStorageSync('proj_edit')
      this.flag = value2.flag
      // console.log(this.flag, '编辑项目判断flag')
      const res = await updateProject(formData)
      if (res.code == 0 || res.code == 200) {
        uni.showToast({
          title: '编辑项目成功!',
          icon: 'success',
          duration: 1500,
          success(res) {
            uni.redirectTo({
              url: '/pages/office/project-approval/index',
            })
          },
        })
        this.cleanStoragData()
      } else if (res.code == 1001) {
        uni.showToast({
          title: '项目已存在!',
          icon: 'error',
          duration: 1500,
        })
      } else {
        uni.showToast({
          title: '编辑失败!',
          icon: 'error',
          duration: 1500,
        })
      }
    },
    cleanStoragData() {
      uni.removeStorageSync('project_form')
      uni.removeStorageSync('desc_form')
      uni.removeStorageSync('code_form')
      uni.removeStorageSync('address_form')
      uni.removeStorageSync('price_form')
      uni.removeStorageSync('hour_form')
      uni.removeStorageSync('remark_form')
      uni.removeStorageSync('begin_form')
      uni.removeStorageSync('end_form')
      uni.removeStorageSync('realbegin_form')
      uni.removeStorageSync('realend_form')
      uni.removeStorageSync('storage_dept')
      uni.removeStorageSync('storage_comm')
      uni.removeStorageSync('storage_part')
      uni.removeStorageSync('storage_tech')
    },
  },
}
</script>

<style lang="scss" scoped>
.project-approval {
  margin: 15px;
  padding: 0 0px;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
  border-radius: 2px;
  padding-bottom: 36px;
}
::v-deep .textarea {
  margin-left: 8px;
  margin-top: 8px;
}
::v-deep .van-divider {
  margin: 0px 0px;
}
::v-deep .van-field__label {
  color: red;
}
::v-deep .label_class {
  font-size: 14px;
  color: #000;
}
</style>
